<template>
<div>


      <div id="box" class="a" @mouseover="Mouseover()" @mouseleave="MouseLeave()">
        <div class="b">
            <!-- <a href="#">山羊の前端小窝</a>
            <h2>WX:Sod-of-goat</h2>
            <span>I'm a front-end developer enthusiast,</br>I'm learning new knowledge every day to share with you,<br/>I hope in the days to come<br/>Keep going!!</span> -->
    <div id="form" class="form">
    <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
      <el-form ref="checkForm" :model="checkForm" label-width="80px" :rules="rules">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="checkForm.name"></el-input>
        </el-form-item>
        <el-form-item label="学号" prop="studentNumber">
          <el-input v-model="checkForm.studentNumber"></el-input>
        </el-form-item>
        <el-form-item label=学院 prop="institute">
          <el-select v-model="checkForm.institute" filterable  placeholder="请选择学院" style="width: 180px;"  :popper-append-to-body="false">
            <div v-for="(item, index) in academyList" :key="index" class="select">
              <el-option :label="item" :value="item" class="select"></el-option>
            </div>
          </el-select>
        </el-form-item>
        <el-form-item label=班级 prop="clazz">
          <el-select v-model="checkForm.clazz" filterable  placeholder="请选择班级" style="width: 160px;"  :popper-append-to-body="false">
            <div v-for="(item, index) in clazzList" :key="index" class="select">
              <el-option :label="item" :value="item" class="select"></el-option>
            </div>
          </el-select>
        </el-form-item>
        <el-form-item label="批次" prop="batch">
          <el-input v-model="checkForm.batch"></el-input>
        </el-form-item>
        <el-button type="primary" :disabled="buttonDisabled" @click="submitForm('checkForm')" style="margin-left:30px">提交</el-button>
    </el-form>
   </div>
        </div>
        <div class="c" id="c">
            <!-- --i是用来计算平面圆柱的动效延迟和距离的
            --w则是用来计算平面圆柱的宽度 -->
            <div class="d" style="--i:1;--w:1.5"></div>
            <div class="d" style="--i:2;--w:1.6"></div>
            <div class="d" style="--i:3;--w:1.4"></div>
            <div class="d" style="--i:4;--w:1.7"></div>
            <div class="e" style="--i:1"></div>
        </div>
        <div id="title">移动开发实验室</div>
        <div id="name">一起探索开发的乐趣</div>
    </div>
  
</div>
</template>

<script>

// import HelloWorld from './components/HelloWorld.vue'
import api from '@/api/quest.js'
export default {
  name: 'App',
  // components: {
  //   HelloWorld
  // }
  data(){
    return {
      checkForm:{
        name:'',
        studentNumber:'',
        institute:'',
        clazz:'',
        batch:''
      },
      buttonDisabled:false,
      backgroundImageIndex:0,
      images:[
        "https://zylcos01-1306915061.cos.ap-nanjing.myqcloud.com/markdown01/iTab-g7mpj7.jpg",
        "https://zylcos01-1306915061.cos.ap-nanjing.myqcloud.com/markdown01/iTab-y8vlyk.jpg",
        "https://zylcos01-1306915061.cos.ap-nanjing.myqcloud.com/markdown01/iTab-4dozvl.jpg"
      ],
      clazzList:[
        "计算机2101",
        "计算机2102",
        "计算机2103",
        "计算机2104",
        "计创本2101",
        "计师本2101",
        "智能本2101",
        "通信本2101",
        "通信本2102",
        "数学本2101",
        "未知"
      ],
      academyList:[
        "信息科学与工程学院",
        "数学与统计学院"
      ],
       rules: {
          name: [
            { required: true, message: '请输入你的姓名', trigger: 'blur' },
            { min: 2, max: 5, message: '长度在 2 到 5个字符', trigger: 'blur' }
          ],
          studentNumber: [
            { required: true, message: '请输入你的学号', trigger: 'blur' },
            { min: 10, max: 15, message: '长度在 10 到 15个字符', trigger: 'blur' }
          ],
          institute: [
            { required: true, message: '请输入你的学院', trigger: 'blur' },
            { min: 2, max: 10, message: '长度在 2 到 10个字符', trigger: 'blur' }
          ],
          clazz: [
           {required: true, message: '请选择活动区域', trigger: 'change'}
          ],
          batch: [
            { required: true, message: '请输入参观批次', trigger: 'blur' },
            { min: 1, max: 2, message: '长度在 1 到 2个字符', trigger: 'blur' }
          ],
          type: [
            { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
          ],
          resource: [
            { required: true, message: '请选择活动资源', trigger: 'change' }
          ],
          desc: [
            { required: true, message: '请填写活动形式', trigger: 'blur' }
          ]
        },
        mouse:0
    }
  },
  created(){
    this.changeImageInterval()
  },
  methods:{
    changeImageInterval(){
      setInterval(this.changeImage,3500)
    },
    changeImage(){
      if(this.backgroundImageIndex==this.images.length-1){
        this.backgroundImageIndex=0
      }else{
        this.backgroundImageIndex++;
      }
      // console.log(this.backgroundImageIndex)
      document.body.style.backgroundImage="url("+`${this.images[this.backgroundImageIndex]}`+")"
      
    },
    Mouseover(){
      if(this.mouse==0){
        // var form = document.getElementById('form')
        // form.style.marginLeft='230px'
        // form.style.opacity='1'
        // var bList = document.getElementsByClassName('d')
        // var e = document.getElementsByClassName('e')

        // var title = document.getElementById('title')
        // title.style.fontSize="40px"
        // title.style.fontWeight="900"
        // title.style.top="30px"
        // title.style.left="320px"

        // var name = document.getElementById('name')
        // name.style.fontSize="20px"
        // name.style.fontWeight="900"
        // name.style.top="520px"
        // name.style.left="200px"
        // setTimeout(()=>{
        //    for(var i = 0;i<bList.length;i++){
        //      bList[i].style.display='none'
        //    }
        //    e[0].style.display='none'
        //    console.log('i--s none')
        // },2000)
        console.log('mouse over')
      }
     this.mouse=1
    },
    MouseLeave(){
      if(this.mouse==1){
         console.log('mouse leave')
      }
      this.mouse=0
    },
     submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            api.addCheckInData(this.checkForm)
            .then((res)=>{
              if(res.data.success){
                this.buttonDisabled=true
                this.$message({
                message: '你好，'+`${this.checkForm.name}`+',你签到成功！',
                type: 'success'
              });
              setTimeout(()=>{
                  window.location.href="http://192.168.3.187:9528/#/checkList"
              },1500)
              
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
#title {
  /* background-color: black; */
  width: 500px;
  height: 70px;
  /* border-style: dashed; */
  padding-left: 34px;
  top: 200px;
  left: 0px;
  position: absolute;
  color: white;
  font-size: 65px;
  font-weight: 900;
  transition: 1s ;
  cursor: pointer;
}
#name {
  /* background-color: black; */
  width: 500px;
  height: 70px;
  /* border-style: dashed; */
  padding-left: 34px;
  top: 350px;
  left: 0px;
  position: absolute;
  color: white;
  font-size: 30px;
  font-weight: 900;
  transition: 1s ;
  cursor: pointer;

}
.a:hover #title {
  font-size: 40px;
  font-weight: 900;
   top: 30px;
   left: 320px;
}
.a:hover #name {
  font-size: 20px;
  font-weight: 900;
   top:  520px;
   left: 200px;
}
.form {
  width: 500px;
  /* background: black; */
  background-color: rgba(204, 212, 230,.2);
  margin-top: 100px;
  border-radius: 20px;
  padding: 20px;
  opacity: 0;
  transition: 1.5s ;

}
body{
            background-color: rgb(204, 212, 230);
            display: flex;
            justify-content: center;
            background-image: url(https://zylcos01-1306915061.cos.ap-nanjing.myqcloud.com/markdown01/iTab-g7mpj7.jpg);
            background-size:100% auto;
            transition-duration: .5s;
        }   
        .a{
            position: relative;
            width: 1000px;
            height: 600px;
            border: #fff 10px solid;
            background-color: rgba(120,140,200,0.8);
            top: 20%;
            border-radius: 20px;
            overflow: hidden;
            transition-duration: .8s;
        }
        .c{
            position: absolute;
            top: -130px;
            right: -240px;
        }
        .d,.e{
            position: absolute;
            right: calc(var(--i)*120px);
            width: calc(var(--w)*45px);
            height: 600px;
            overflow: hidden;
            border-radius: 100px;
            transform: rotateZ(220deg) translate(0,0);
            background: rgb(240,220,150);
            transition: .5s .5s;
        }
        .d:nth-child(2){
            background: rgb(240,190,230);
        }
        .e{
            left: -570px;
            top: -140px;
            width: 70px;
            background-color: rgb(90,220,150);
        }
        .a:hover{
          background-color: rgba(120,140,200,0.7);

        }
        .a:hover .c div{
            transition: .5s calc(var(--i)*.1s);
            transform: rotateZ(220deg) translate(-200px,850px);
        }
        .f{
            width: 250px;
            height: 250px;
            position: absolute;
            /* background-image: url("goat.png"); */
            background-size: cover;
            margin: 70px;
            opacity: 0;
            transition: .5s;
        }
        .a:hover .f{
            transition: 1s 1.3s;
            opacity: 1;
        }
        .a:hover .form {
          opacity: 1;
          margin-left: 230px;
        }
        /* .select:hover .form{
          opacity: 1;
          margin-left: 230px;
        } */
</style>
